<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模拟网上银行系统 - 用户信息</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", sans-serif;
            background-color: #f4f4f4;
        }

        /* 顶部导航栏 */
        .header {
            background-color: #87ceeb;
            padding: 10px 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .header a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 14px;
        }

        /* 主内容区 */
        .content {
            width: 800px;
            margin: 20px auto;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 30px;
        }

        .content h2 {
            color: #333;
            margin-bottom: 20px;
        }

        .content table {
            width: 100%;
            border-collapse: collapse;
        }

        .content table tr {
            border-bottom: 1px solid #ddd;
        }

        .content table td {
            padding: 15px;
            text-align: left;
        }

        .content table td:first-child {
            width: 120px;
            color: #666;
            background-color: #f9f9f9;
        }

        /* 输入框样式 */
        input[type="text"] {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 按钮样式 */
        .edit-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
            margin-left: 10px;
        }

        .save-btn {
            background-color: #008CBA;
            color: white;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
            margin-right: 5px;
        }

        .cancel-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
        }

        /* 底部管理栏 */
        .footer {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 10px;
            font-size: 12px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<!-- 顶部导航栏 -->
<div class="header">
    <a href="#">个人信息</a>
</div>

<!-- 主内容区（用户信息展示） -->
<div class="content">
    <h2>用户信息详情</h2>

    <!-- 表单区域 -->
    <form id="addressForm" action="#" method="post">
        <!-- 隐藏字段保存用户ID -->
        <input type="hidden" id="userId" value="">

        <table>
            <tr>
                <td>用户ID</td>
                <td id="userIdText"></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td id="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td>*******</td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td><input type="text" id="phoneNumber" readonly></td>
            </tr>
            <tr>
                <td>email</td>
                <td><input type="text" id="email" readonly></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="text" id="address" readonly></td>
            </tr>
            <tr>
                <td>性别</td>
                <td id="gender"></td>
            </tr>
            <tr>
                <td>用户类型</td>
                <td id="userType"></td>
            </tr>
        </table>
        <button type="button" class="edit-btn" onclick="enableEdit()">编辑</button>
        <button type="button" class="save-btn" onclick="saveUserInfo()">保存</button>
        <button type="button" class="cancel-btn" onclick="disableEdit()">取消</button>
    </form>
</div>

<!-- 底部管理栏 -->
<div class="footer">
    <button class="edit-btn" onclick="window.location.href='UserHome.html'">退出</button>
</div>

<script>
    // 页面加载时获取用户信息
    document.addEventListener("DOMContentLoaded", async function () {
        try {
            const response = await fetch('/user/currentUser');
            const result = await response.json();

            if (result.code === 2000 && result.data) {
                const user = result.data;

                // 填充用户信息
                document.getElementById('userId').value = user.userId || '';
                document.getElementById('userIdText').textContent = user.userId || '';
                document.getElementById('username').textContent = user.username || '';
                document.getElementById('phoneNumber').value = user.phoneNumber || '';
                document.getElementById('email').value = user.email || '';
                document.getElementById('address').value = user.address || '';
                document.getElementById('gender').textContent = user.gender || '';
                document.getElementById('userType').textContent = user.userType || '';
            } else {
                alert(result.msg || '获取用户信息失败');
            }
        } catch (error) {
            console.error("获取用户信息异常:", error);
            alert("网络请求失败，请稍后再试");
        }
    });

    // 启用编辑功能
    function enableEdit() {
        document.getElementById('phoneNumber').removeAttribute('readonly');
        document.getElementById('email').removeAttribute('readonly');
        document.getElementById('address').removeAttribute('readonly');
    }

    // 禁用编辑功能
    function disableEdit() {
        document.getElementById('phoneNumber').setAttribute('readonly', 'readonly');
        document.getElementById('email').setAttribute('readonly', 'readonly');
        document.getElementById('address').setAttribute('readonly', 'readonly');
    }

    // 保存用户信息
    async function saveUserInfo() {
        const userId = document.getElementById('userId').value.trim();
        const phoneNumber = document.getElementById('phoneNumber').value.trim();
        const email = document.getElementById('email').value.trim();
        const address = document.getElementById('address').value.trim();

        if (!address) {
            alert("地址不能为空");
            return;
        }

        try {
            const response = await fetch('/user/updateAddress', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ userId, phoneNumber, email, address })
            });

            const result = await response.json();

            if (result.code === 2000) {
                alert("信息更新成功");
                disableEdit(); // 关闭编辑模式
            } else {
                alert(result.msg || "更新失败，请稍后再试");
            }
        } catch (error) {
            console.error("更新用户信息异常:", error);
            alert("网络请求失败，请稍后再试");
        }
    }
</script>

</body>
</html>